<template>
  <van-swipe class="my-swipe" indicator-color="white" @change="changeindex" :initial-swipe="startindex">
    <!-- :autoplay="3000" -->
    <van-swipe-item v-for="(item, index) in lunbo">
      <img :src="item" alt="" @click="previewImg(index)">
    </van-swipe-item>
    <template #indicator="{ active, total }">
      <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
    </template>
  </van-swipe>
</template>

<script>
export default {
  data() {
    return {
      lunimg: [],
      startindex: 0
    }
  },
  props: ['lunbo'],
  methods: {
    previewImg() {
      showImagePreview({
        images: this.lunbo,
        startPosition: this.startindex,
        onChange: (inx) => {
          this.startindex = inx
          console.log(inx);

        }
      })
    },
    changeindex(index) {
      console.log(index);
      this.startindex = index
    }

  }
}
</script>

<style lang="less" scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.my-swipe {
  background-color: red;
  font-size: 0;

  img {
    width: 100%;
  }
}
</style>